<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else class="">
		<view class="search">
			<u-search inputAlign="left" placeholder="请输入关键字搜索" :clearabled="true" search-icon-color="#111111"
				@search="search()" v-model="searchVal" height="30" @clear="celSearch" :show-action="false"></u-search>
		</view>
		<!-- <view class="shopTitle" @click="nav_to('/pages/mall/shoporder')">兑换记录</view> -->
		<view class="shoplist" v-if="shop_list.length > 0">
			<view class="shopcont" v-for="(item, index) in shop_list" :key="index"
				@click="nav_to('/pages/mall/detail?id=' + item.ID)">
				<image class="shopimg" :src="restoreImg(item.Images)[0]" mode="aspectFill"></image>
				<view class="shopname">{{ $util.entitiesToUtf16(item.ProductName) }}</view>
				<view class="shopbtn">
					<view class="shopprice">
						<block v-if="item.Price > 0 && item.Score > 0">
							<text class="pricetitle">{{ '￥' }}</text>
							<text class="pricetext">{{ changePV(item.Price) }}</text>
							<text class="pricetitle">{{ '+' }}</text>
							<text class="pricetext">{{ changePV(item.Score) }}</text>
							<text class="pricetitle">{{ '挥豆' }}</text>
						</block>
						<block v-else>
							<text class="pricetitle" v-if="item.Price > 0">{{ '￥' }}</text>
							<text class="pricetext">{{ item.Score ? changePV(item.Score) : changePV(item.Price)
								}}</text>
							<text class="pricetitle" v-if="item.Score > 0">{{ '挥豆' }}</text>
						</block>
					</view>
					<view class="Exchange">兑换</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20px;">
			<u-empty mode="list" width="100" height="100"
				icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
				iconSize="32" text="暂无商品"></u-empty>
		</view>
		<view class="goCard" @click="nav_to('/pages/mall/shop_cart')">
			<view class="cardImg">
				<image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1735012398104810.png"
					mode="widthFix" />
				<view class="cir_icon" v-if="shoplength > 0">{{ shoplength }}</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			Name: '',
			shop_list: [],
			searchVal: '',
			shopIndex: 1,
			shopSize: 10,
			shoplength: 0,
		};
	},
	onLoad() {
		this.get_shop();
	},
	onShow() {
		this.PageIndex = 1
		this.get_shop();
		this.MyCart()
	},
	//下拉刷新
	onPullDownRefresh() {
		this.PageIndex = 1
		this.get_shop()
		uni.stopPullDownRefresh()
	},
	// 触底事件
	onReachBottom() {
		this.shopIndex++
		this.get_shop()
	},
	methods: {
		async MyCart() {
			let res = await this.$api.post('ShopCart/MyCart', {
			})
			if (res.code == 0) {
				this.shoplength = 0
				for (let i = 0; i < res.data.length; i++) {
					for (let j = 0; j < res.data[i].Item.length; j++) {
						this.shoplength += 1
					}
				}
			}
		},
		changePV(pv) {
			if (pv > 10000) {
				return (pv / 10000).toFixed(1) + '万'
			} else {
				return pv
			}
		},
		celSearch() {
			this.showSearch = false;
			this.searchVal = '';
			this.get_shop()
		},
		search() {
			this.$util.throttle(async () => {
				this.shopIndex = 1
				this.get_shop();
			}, 300);
		},
		async get_shop() {
			let res = await this.$api.post('/Products/PageList', {
				PageIndex: this.shopIndex,
				PageSize: this.shopSize,
				ProductName: this.searchVal,
				Type: 3
			});
			if (res.code == 0) {
				if (this.shopIndex == 1) {
					this.shop_list = res.data;
				} else {
					this.shop_list = this.shop_list.concat(res.data)
				}
				this.load = true
			}
			uni.stopPullDownRefresh();

		},
		goProduct(id) {
			uni.navigateTo({
				url: `/pages/mall/detail?id=${id}`,
			});
		},
		restoreImg(Images) {
			let str = Images || '';
			if (str.includes('.png') || str.includes('.jpg') || str.includes('.jpeg') || str.includes('.webp')) {
				let imglist = Images.split(',') || []

				return imglist
			} else {
				return []
			}

		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.null {
	width: 100%;
	height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #999;
	font-size: 26rpx;

	image {
		width: 340rpx;
	}
}

.search {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 32rpx;
	background: #fff;
	// text-align: left;
	z-index: 99;
}

.shopTitle {
	font-size: 28rpx;
	color: #706EEE;
	text-decoration: underline;
	text-align: right;
	position: relative;
	top: 140rpx;
	width: 90%;
	margin: 0 auto;
}

.shoplist {
	width: 90%;
	margin: 32rpx auto;
	position: relative;
	top: 140rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	.shopcont {
		width: 328rpx;
		height: 510rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 32rpx;

		.shopimg {
			width: 328rpx;
			height: 292rpx;
			background-color: #706EEE;
			border-radius: 16rpx 16rpx 0 0;
		}

		.shopname {
			font-size: 28rpx;
			color: #10100F;
			margin: 20rpx;
			margin-bottom: 4rpx;
			width: 300rpx;
			height: 76rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			white-space: normal;

		}

		.shopbtn {
			display: flex;
			// align-items: center;
			flex-direction: column;
			justify-content: space-between;
			margin: 0 20rpx;

			.shopprice {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.pricetext {
					font-size: 30rpx;
					font-weight: bold;
					color: #FC201C;
					margin-right: 4rpx;
				}

				.pricetitle {
					font-size: 24rpx;
					color: #FC201C;
				}
			}

			.Exchange {
				width: 112rpx;
				height: 52rpx;
				background: #706EEE;
				border-radius: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
				margin-left: auto;
			}
		}
	}
}

.goCard {
	position: fixed;
	bottom: 80rpx;
	right: 40rpx;
	width: 100rpx;
	height: 100rpx;
	background: #706EEE;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99;
	box-sizing: border-box;
	padding: 20rpx;

	.cardImg {
		width: 100%;
		height: 100%;
		position: relative;

		>image {
			width: 100%;
			height: 100%;
			display: block;
		}

		.cir_icon {
			// padding: 10rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: red;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
			position: absolute;
			right: -12rpx;
			top: -5rpx;
		}
	}


}
</style>
